<div class="card bg-base-100 w-1/2 mx-auto flex flex-col p-6 rounded-lg shadow-lg">
    <div class="card-title justify-center text-3xl text-primary">Sign up</div>
    <div class="card-body w-full">

        <ul class="steps">
            <li class="step step-primary">Credentials</li>
            <li class="step" [class.step-primary]="currentStep() === 2">Profile</li>
        </ul>

        @if (currentStep() === 1) {
        <form [formGroup]="credentialsForm" class="flex flex-col gap-4 w-full steps">
            <app-text-input class="mt-2" label="Email" formControlName="email" />
            <app-text-input label="Display name" formControlName="displayName" />
            <app-text-input label="Password" formControlName="password" type="password" />
            <app-text-input label="Confirm Password" formControlName="confirmPassword" 
                type="password" />

            <div class="flex items-center justify-end gap-3">
                <button (click)="cancel()" type="button" class="btn">Cancel</button>
                <button
                    [disabled]="!credentialsForm.valid" 
                    (click)="nextStep()"
                    class="btn btn-primary" type="button">Next</button>
            </div>
        </form>
        }

        @if (currentStep() === 2) {
            <form [formGroup]="profileForm" class="flex flex-col w-full gap-4 steps">
                
                <div class="flex items-center gap-4">
                    <div class="font-semibold">Gender: </div>
                    <label class="flex gap-3 items-center">
                        <span>Male</span>
                        <input type="radio" formControlName="gender" value="male" 
                            class="radio radio-primary">
                    </label>
                    <label class="flex gap-3 items-center">
                        <span>Female</span>
                        <input type="radio" formControlName="gender" value="female" 
                            class="radio radio-primary">
                    </label>
                </div>

                <app-text-input 
                    [maxDate]="getMaxDate()"
                    type="date" label="Date of Birth" formControlName="dateOfBirth" />
                <app-text-input label="City" formControlName="city" />
                <app-text-input label="Country" formControlName="country" />

                <div class="flex items-center justify-end gap-3">
                <button (click)="prevStep()" type="button" class="btn">Back</button>
                <button
                    [disabled]="!profileForm.valid" 
                    (click)="register()"
                    class="btn btn-primary" type="button">Register</button>
            </div>
            </form>
        }

    </div>

    @if (validationErrors().length > 0) {
        <div class="mt-5 flex bg-gray-200 rounded-2xl w-1/2 p-3 mx-auto">
            <ul class="flex flex-col text-error space-y-1">
                @for (error of validationErrors(); track $index) {
                    <li>{{error}}</li>
                }
            </ul>
        </div>
    }

</div>